<template>
  <div style="padding: 0 6px;">
    <flexbox :gutter="0">
      <flexbox-item >
        <div class="flex-demo" style="width: 100%;">
          <img src="src/assets/images/index/Hotseller/xian.png" alt="" class="img">
        </div>
      </flexbox-item>
      <flexbox-item :span="3"><div class="flex-demo" style="text-align: center">酒店客房</div></flexbox-item>
      <flexbox-item >
        <div class="flex-demo" style="width: 100%;">
          <img src="src/assets/images/index/Hotseller/xian.png" alt="" class="img">
        </div>
      </flexbox-item>
    </flexbox>
    <flexbox wrap="wrap" :gutter="0">
      <flexbox-item :span="6/13">
        <div class="flex-demo" style="width: 100%;">
          <img :src="hotel1.url" alt="" class="img">
        </div>
        <div class="flex-demo">
          <div>{{hotel1.tit}}</div>
          <div>
            <x-icon type="ios-star" size="20" v-for="i in hotel1.hot" class="hongxing"></x-icon>
            <x-icon type="ios-star-outline" size="20" v-for="o in (5-hotel1.hot)" class="hongxing"></x-icon>
          </div>
          <div class="fs12">{{hotel1.address}}</div>
        </div>
        <div class="flex-demo fs12">{{hotel1.price}}</div>
      </flexbox-item>
      <flexbox-item :span="1/13"><div class="flex-demo"></div></flexbox-item>
      <flexbox-item :span="6/13">
        <div class="flex-demo" style="width: 100%;">
          <img :src="hotel2.url" alt="" class="img">
        </div>
        <div class="flex-demo">
          <div>{{hotel2.tit}}</div>
          <div>
            <x-icon type="ios-star" size="20" v-for="i in hotel2.hot" class="hongxing"></x-icon>
            <x-icon type="ios-star-outline" size="20" v-for="o in (5-hotel2.hot)" class="hongxing"></x-icon>
          </div>
          <div class="fs12">{{hotel2.address}}</div>
        </div>
        <div class="flex-demo fs12">{{hotel2.price}}</div>
      </flexbox-item>
      <flexbox-item :span="6/13">
        <div class="flex-demo" style="width: 100%;">
          <img :src="hotel3.url" alt="" class="img">
        </div>
        <div class="flex-demo">
          <div>{{hotel3.tit}}</div>
          <div>
            <x-icon type="ios-star" size="20" v-for="i in hotel3.hot" class="hongxing"></x-icon>
            <x-icon type="ios-star-outline" size="20" v-for="o in (5-hotel3.hot)" class="hongxing"></x-icon>
          </div>
          <div class="fs12">{{hotel3.address}}</div>
        </div>
        <div class="flex-demo fs12">{{hotel3.price}}</div>
      </flexbox-item>
      <flexbox-item :span="1/13"><div class="flex-demo"></div></flexbox-item>
      <flexbox-item :span="6/13">
        <div class="flex-demo" style="width: 100%;">
          <img :src="hotel4.url" alt="" class="img">
        </div>
        <div class="flex-demo">
          <div>{{hotel4.tit}}</div>
          <div>
            <x-icon type="ios-star" size="20" v-for="i in hotel4.hot" class="hongxing"></x-icon>
            <x-icon type="ios-star-outline" size="20" v-for="o in (5-hotel4.hot)" class="hongxing"></x-icon>
          </div>
          <div class="fs12">{{hotel4.address}}</div>
        </div>
        <div class="flex-demo fs12">{{hotel4.price}}</div>
      </flexbox-item>
    </flexbox>
    <div>
      <x-icon type="ios-star" size="20" class="hongxing"></x-icon>
    </div>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Divider } from 'vux'
  const hotel1=
    {
      url: 'src/assets/images/index/hotel/jd-1.png',
      tit: '扎龙自然保护区',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 4,
      price: '￥188/人',
      index: 1
    }
  const hotel2=
    {
      url: 'src/assets/images/index/hotel/jd-2.png',
      tit: '龙沙公园',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 3,
      price: '￥38/人',
      index: 2
    }
  const hotel3=
    {
      url: 'src/assets/images/index/hotel/jd-3.png',
      tit: '明月岛风景区',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 2,
      price: '￥68/人',
      index: 3
    }
  const hotel4=
    {
      url: 'src/assets/images/index/hotel/jd-4.png',
      tit: '明月岛风景区',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 1,
      price: '￥68/人',
      index: 4
    }

  export default {
    name: "Hotel",
    components: {
      Flexbox,
      FlexboxItem,
      Divider
    },
    data(){
      return{
        hotel1: hotel1,
        hotel2: hotel2,
        hotel3: hotel3,
        hotel4: hotel4
      }
    }
  }
</script>

<style scoped>
  .img{
    width: inherit;
    height: auto;
    display: block;
  }
  .hongxing{
    fill: #ff990e
  }
</style>
